Author: Theodore Odeluga
The sheer variety of mobile tech available today means almost limitless choice in how we get online right now.
The challenge then continues to be in how to design for a world of dynamic change while maintaining consistent user experiences.
Modern devices are now distinguished by an overwhelming myriad of resolutions and form factors which belie the word “standard”.
When you consider that an application might look good on one device but by modifying its UI for another even slightly could possibly “break” what was working previously elsewhere, it’s easy to see how developers have got their work cut out when adapting to the ever expanding (and still evolving) World Wide Web.
At times, it can seem as if there’s a special format for every individual on the planet.
Of course, the scale of divergence between laptops, phones, tablets and desktops means it isn’t practical to even think about how to account for every possible variation.
However, every developer who ever felt inspired by a clever solution might speculate at least once about trying.
Is it possible at all, to ever support (all) users without trying to cover every individual screen size (that we know of)?
And what kind of formula might achieve this if it were?
There is one particular solution which can take us some way towards this almost-utopia; calculate the aspect ratio of a device’s resolution by dividing with the highest common factor in a screen sizes width and height.
Here’s an example. Let’s say we have of a resolution of 1920 x 1080.
These numbers represent a ratio of 16:9 or more specifically 16 (width) 9 (height).
We know this because by testing for the highest common factor between numbers as we cancel down, starting with 2 and evenly dividing each set of values by every number in the factor sequence till we can go no higher, we will eventually arrive at the correct aspect ratio.
The sequence starts with 2 as the lowest possible value for an HCF because we need to consider the widest possible range.
We keep dividing from here with ever increasing numbers till we find a factor which (doesn’t) evenly divide the next set of values.
1920 divided by 2 is 960.
1080 divided by 2 is 540.
960 divided by 3 is 320.
540 divided by 3 is 180.
320 divided by 4 is 80.
180 divided by 4 is 45.
80 divided by 5 is 16.
45 divided by 5 is 9.
At this point we’ve achieved an easy set of divisions without any remainders.
We cannot go beyond 5 because 6 won’t evenly divide the next pair of aspect ratio numbers.
This means 5 is the highest common factor and 16:9 is our aspect ratio.
This approach applies to every resolution.
For example, we see the screen size of 1600 x 900 is also based on a ratio of 16:9 because we can simply divide both numbers by 100.
In another example, the screen size of 1680 x 1050 represents an aspect ratio of 8:5 because the highest common factor here is 210.
This method avoids what would otherwise lead to a large collection of CSS modules dedicated to specific screen size values compared to a comparatively smaller set of files based specifically on aspect ratios.
Everything seems to work so far. But what if we end up with irrational numbers?
If we were working with a screen size of say 1400 x 1050 for example, dividing the right side by 3 would work fine (turning 1050 to 350) but the left side would result in a series of trailing numbers.
This is clearly unwanted and certainly means 3 is not the highest common factor in this case.
To resolve this, it’s ok to accept it’s not necessary to test for every possible number in the low to high factor sequence.
As a useful method of estimation, we could jump ahead to multiples of 10 and keep incrementing by 10 for every set of values as long as they were easy to factorize.
In this instance, we discover 50 equally divides 1050 and 350 alike resulting in 21 and 7 respectively.
We also see by adjusting to a (smaller) HCF (instead of continuing from 50 upwards), the highest common factor is 7 with an aspect ratio of 3:1.
Although 3:1 is not a common standard for mobile devices, laptops or desktops, it is a valid ratio.
This is acceptable, albeit as an answer we got by “breaking the rules” slightly (it’s of course okay to be flexible if it’s practical).
With this technique, we create CSS for one aspect ratio (in one file) covering multiple device resolutions instead of unique code (in each of several files) for unique resolutions in a collection which could possibly keep extending.
The following HTML is an example of how to keep tabs on several resolutions within one aspect ratio.
< link rel="stylesheet" media="device-aspect-ratio: 16/9"
href="16to9devices.css" />
With the above, the related CSS file contains specific instructions based on percentage values detailing how to visually and physically organize your user interface elements to (one) aspect ratio for a number of devices with different screen and viewport resolutions.
Conclusion
I hope this is useful. With the dizzying variety and versatility of today’s desktop and mobile devices, its vital we keep developing for as many environments as possible.
The method outlined above will help us to achieve this and cut out the headache of managing an ever-expanding list of separate screen resolutions.